import { h, Component } from 'preact';

import { Layout, Sider, Content, Header} from "@preact/layout"; 
import { Row, Col} from "@preact/grid"; 
import ConfigPanel from "@comps/config";
import ChartRender from "@comps/chart";
import { UIToolbar } from "@comps/tools";
import { add, destory, envoke } from "@store";
import { addList } from "@charm:data/business/editor";

import "@static:css/reset.less";

export default class Editor extends Component {

    state = {
        lists:[]
    }

    id = "editor";

    componentDidMount(){
        const id = this.id;
        add(id, 'addList', () => {
            let { lists = [] } = this.state;
            lists = addList(lists);
            this.setState({
                lists
            })
        })

        add(id, 'updateList', data => {
            let { lists = [] } = this.state;
            const { uuid } = data;
            for(let i = 0, l = lists.length;i < l;i++){
                const d = lists[i];
                if(d.uuid === uuid){
                    lists[i] = data;
                    break;
                }
            }
            this.setState({
                lists: [...lists]
            })
        })
    }

    componentWillUnmount(){
        const id = this.id;
        destory(id);
    }

    render(){
        const { lists } = this.state;
        console.log('Editor => render')
        return <Layout style={{height: "100%"}}>
            <Header>
                <Row style={{color: "#ffffff", padding: "0"}}>
                    <Col cols={24}>
                        <UIToolbar pid={this.id} />
                    </Col>
                </Row>
            </Header>
            <Layout className="c-layout-has-sider">
                <Layout style={{padding: 24, margin: 0, minHeight: 280}}>
                    <Content id={`${this.id}-container`} style={{position: "relative", backgroundColor: "rgba(153, 153, 153, 0.1)", height: "100%"}}>
                        {
                            lists.map(e => {
                                const {uuid} = e;
                                return <ChartRender key={e} pid={this.id} uuid={uuid} />
                            })
                        }
                    </Content>
                </Layout>
                <Sider width={300}>
                    <ConfigPanel />
                </Sider>
            </Layout>
        </Layout>
    }
}
